<template>
<!-- 我们不知道什么时候可以拿到max的值，但是总有一时刻可以拿到真正max的值 -->
<!-- 我们可以使用watch属性来监听父组件传递过来的max的值，不管watch会被触发几次，但是最后一次一定是一个合法的max的值 -->
  <div class="mui-numbox" data-numbox-min="1">
    <button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
    <input id="test" class="mui-input-numbox" type="number" value="1" @change="countChange" ref="numbox"/>
    <button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
  </div>
</template>
<script>
import mui from '../../lib/mui/js/mui.min.js'

export default {
    mounted(){
        // 初始化数字选择框组件
        mui('.mui-numbox').numbox();
        console.log(this.max);//undefined   由于请求数据的时候是异步加载的，此时还没有加载过来 所以是undefined
    },
    methods:{
      // 每当文本框的数据被修改的时候，立即把最新的数据，通过事件调用，传递给父组件
      countChange(){
        // console.log(this.$refs.numbox.value);
        this.$emit('getcount',parseInt(this.$refs.numbox.value))
      }
    },
    props:['max'],
    watch:{
      // 属性监听
      // 目的是控制这个max的值，最大值根据库存的最大值，再点击加号就不管用了
      // 使用mui的JS API实现num的控制
      max: function(newVal,oldVal){
        mui('.mui-numbox').numbox().setOption('max',newVal);
      }
    }
};
</script>
<style lang="less" scoped>
</style>

